<template>
  <div class="food">
    <Topbar :title="title" :gobackEnabled="true"/>

    <!--浮动条-->
    <div class="fixedbar">
      <div class="inner">
        <!--类目筛选-->
        <div class="fixedbar-item-wrapper category" :class="{'fixedbar-item-active':focusType=='category'}">
          <div class="button-box" @click="toggleFocusType('category')">
            <div class="button-inner">
              {{categoryTitle}}
              <svg
                width="10"
                height="10"
                xmlns="http://www.w3.org/2000/svg"
                version="1.1"
                class="button-arrow"
              >
                <polygon points="0,3 10,3 5,8"></polygon>
              </svg>
            </div>
          </div>
          <transition name="content-box" v-if="foodCategorys">
            <div class="content-box" v-show="focusType=='category'">
              <div class="category-left">
                <ul class="category-level1">
                  <li
                    v-for="(category) in foodCategorys"
                    :class="{'category-active':category.id == params.categoryId}"
                    :key="category.id"
                    @click="setCategory(category)"
                  >
                    <section>
                      <img class="icon" :src="getImgPath(category.image_url)">
                      <span>{{category.name}}</span>
                    </section>
                    <section>
                      <span class="count">{{category.count}}</span>
                      <svg class="arrow" width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1">
                        <path d="M0 0 L6 4 L0 8" stroke="#bbb" stroke-width="1" fill="none"></path>
                      </svg>
                    </section>
                  </li>
                </ul>
              </div>
              <div class="category-right">
                <ul class="category-level2">
                  <li
                    v-for="(subCategory) in foodCategorySubs"
                    :class="{'category-active': params.subCategoryId == subCategory.id}"
                    :key="subCategory.id"
                    @click="setSubCategory(subCategory)"
                  >
                    <span>{{subCategory.name}}</span>
                    <span>{{subCategory.count}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </transition>
        </div>

        <!--排序规则-->
        <div class="fixedbar-item-wrapper sort" :class="{'fixedbar-item-active':focusType=='sort'}">
          <div class="button-box" @click="toggleFocusType('sort')">
            <div class="button-inner">
              排序
              <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="button-arrow">
                <polygon points="0,3 10,3 5,8"></polygon>
              </svg>
            </div>
          </div>
          <transition name="content-box">
            <div class="content-box" v-show="focusType=='sort'">
              <ul class="sort-list">
                <li v-for="(sort) in sortList" :key="sort.id" @click="setSortType(sort.id)">
                  <svg>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" v-bind:xlink:href="'#' + sort.icon"></use>
                  </svg>
                  <div :class="{selected: params.sortType == sort.id}">
                    <span>{{sort.name}}</span>
                    <svg class="selected-icon">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                    </svg>
                  </div>
                </li>
              </ul>
            </div>
          </transition>
        </div>

        <!--筛选规则-->
        <div class="fixedbar-item-wrapper filter">
          <div class="button-box" @click="toggleFocusType('filter')">
            筛选
            <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="button-arrow">
              <polygon points="0,3 10,3 5,8"></polygon>
            </svg>
          </div>
          <transition name="content-box">
            <div class="content-box" v-show="focusType=='filter'">
              <div class="filter-item">
                <h4>配送方式</h4>
                <ul>
                  <li
                    :class="{selected: params.deliveries[i].selected}"
                    v-for="(delivery, i) in foodDeliveries"
                    :key="delivery.id"
                    @click="toggleFilter(params.deliveries[i])"
                  >
                    <div>
                      <svg>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fengniao"></use>
                      </svg>
                      <span>{{delivery.text}}</span>
                    </div>
                    <svg class="selected-icon">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                    </svg>
                  </li>
                </ul>
              </div>
              <div class="filter-item">
                <h4>商家属性（可以多选）</h4>
                <ul>
                  <li
                    :class="{selected: params.supports[i].selected}"
                    v-for="(support, i) in foodSupports"
                    :key="support.id"
                    @click="toggleFilter(params.supports[i])"
                  >
                    <div>
                      <span
                        class="support-icon"
                        :style="{color: '#' + support.icon_color, borderColor: '#' + support.icon_color}"
                      >{{support.icon_name}}</span>
                      <span>{{support.name}}</span>
                    </div>
                    <svg class="selected-icon">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                    </svg>
                  </li>
                </ul>
              </div>
              <div class="filter-button-box">
                <button @click="clearFilters()">清空</button>
                <button
                  class="confirm"
                  :value="'确定'+ filterNum"
                  @click="submitFilters()"
                >确定{{filterNum > 0 ? '('+ filterNum +')':''}}</button>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>

    <transition name="shoplist-cover">
      <div class="shoplist-cover" v-show="focusType" @click="focusType=''"></div>
    </transition>

    <div class="shoplist-wrapper">
      <ShopList :paramsVersion="paramsVersion" :params="params"/>
    </div>
  </div>
</template>

<script>
import Topbar from '../../components/Topbar';
import ShopList from '../../components/ShopList';
import { mapState, mapActions } from 'vuex';
import {
  getFoodCategorys,
  getFoodDeliveries,
  getFoodSupports
} from '../../etc/datas';
import { getImgPath } from '../../etc/methods';

export default {
  data() {
    return {
      title: '',
      categoryTitle: '',
      shopParams: null,
      focusType: '', // 顶部条激活类型
      foodCategorys: null,
      foodCategorySubs: null,
      foodDeliveries: null,
      foodSupports: null,

      paramsVersion: 0, // 参数版本
      params: {
        categoryId: '', // 一级类目
        subCategoryId: '', // 二级类目
        sortType: null, // 排序方式
        deliveries: [], // 配送方式
        supports: [] // 选中的服务
      },

      sortList: [
        // 排序数据
        { id: 0, name: '智能排序', icon: 'default' },
        { id: 5, name: '距离最近', icon: 'distance' },
        { id: 6, name: '销量最高', icon: 'hot' },
        { id: 1, name: '起送价最低', icon: 'price' },
        { id: 2, name: '配送速度最快', icon: 'speed' },
        { id: 3, name: '评分最高', icon: 'rating' }
      ],

      filterNum: 0,

      end: null
    };
  },
  beforeMount() {
    this.initPosition();
    this.initData();
    this.initFoodCategorys();
    this.initFoodDeliveries();
    this.initFoodSupports();
  },
  mounted() {},
  computed: {
    ...mapState(['position'])
  },
  methods: {
    ...mapActions(['initPosition']),
    getImgPath,
    initData() {
      this.title = this.categoryTitle = this.$route.query.title;
      this.params.categoryId = this.$route.query.restaurant_category_id;
    },

    //初始化食物category数据
    initFoodCategorys() {
      getFoodCategorys(data => {
        this.foodCategorys = data.filter(category => category.id != null);
        this.foodCategorys.forEach(category => {
          if (this.params.categoryId == category.id) {
            this.foodCategorySubs = category.sub_categories.slice(1);
          }
        });
      }, this.position);
    },

    //初始化配送方式数据
    initFoodDeliveries() {
      getFoodDeliveries(data => {
        this.foodDeliveries = data;
        this.params.deliveries = data.map(item => ({
          id: item.id,
          selected: false
        }));
      }, this.position);
    },

    //初始化商品支持的服务数据
    initFoodSupports() {
      getFoodSupports(data => {
        this.foodSupports = data;
        this.params.supports = data.map(item => ({
          id: item.id,
          selected: false
        }));
      }, this.position);
    },

    // 事件
    toggleFocusType(focusType) {
      if (this.focusType === focusType) {
        this.focusType = '';
      } else {
        this.focusType = focusType;
      }
      this.rollbackFilters();
    },
    setCategory(category) {
      if (this.params.categoryId !== category.id) {
        this.params.categoryId = category.id;
        this.params.subCategoryId = '';
        this.foodCategorySubs = category.sub_categories.slice(1);
      }
    },
    setSubCategory(subCategory) {
      if (subCategory.id != this.params.subCategoryId) {
        this.params.subCategoryId = subCategory.id;
        this.title = this.categoryTitle = subCategory.name;
        this.paramsVersion = +new Date();
      }
      this.focusType = '';
    },
    setSortType(sortType) {
      if (sortType != this.params.sortType) {
        this.params.sortType = sortType;
        this.paramsVersion = +new Date();
      }
      this.focusType = '';
    },

    toggleFilter(item) {
      if (!item.backup) {
        item.backup = true;
        item.selectedBackup = item.selected;
      }
      item.selected = !item.selected;
    },

    rollbackFilters() {
      //回退选择
      this.params.deliveries.concat(this.params.supports).forEach(item => {
        if (item.backup) {
          item.backup = false;
          item.selected = item.selectedBackup;
        }
      });
    },
    clearFilters() {
      this.params.deliveries.concat(this.params.supports).forEach(item => {
        if (!item.backup) {
          item.backup = true;
          item.selectedBackup = item.selected;
        }
        item.selected = false;
      });
    },
    submitFilters() {
      let isChange = false;
      this.params.deliveries.concat(this.params.supports).forEach(item => {
        if (item.backup && item.selected !== item.selectedBackup) {
          isChange = true;
          item.backup = false;
        }
      });
      if (isChange) {
        this.paramsVersion = +new Date();
      }
      this.focusType = '';
    }
  },
  components: {
    Topbar,
    ShopList
  }
};
</script>
<style lang="scss">
@import '../../styles/mixin';
.food {
  .fixedbar {
    padding-top: 1.6rem;
  }
  .fixedbar .inner {
    background-color: #fff;
    border-bottom: 0.06rem solid #f1f1f1;
    position: fixed;
    top: 1.95rem;
    right: 0;
    width: 100%;
    display: flex;
    z-index: 13;
    box-sizing: border-box;
  }
  .fixedbar-item-wrapper {
    @include sc(0.55rem, #444);
    @include wh(33.3%, 1.6rem);
    text-align: center;
    line-height: 1rem;
    .button-box {
      @include wh(100%, 100%);
      position: relative;
      z-index: 14;
      background-color: #fff;
      box-sizing: border-box;
      padding-top: 0.3rem;
      .button-inner {
        border-right: 0.06rem solid $bc;
      }
      .button-arrow {
        vertical-align: middle;
        transition: all 0.3s;
        fill: #666;
      }
    }
    .content-box {
      width: 100%;
      position: absolute;
      display: flex;
      top: 1.6rem;
      left: 0;
      border-top: 0.06rem solid $bc;
      background-color: #fff;
    }
  }

  .fixedbar-item-active {
    .button-box {
      color: $blue;
      .button-arrow {
        transform: rotate(180deg);
        fill: $blue;
      }
    }
  }

  .category-left {
    flex: 1;
    background-color: #f1f1f1;
    height: 16rem;
    overflow-y: auto;
    span {
      @include sc(0.5rem, #666);
      line-height: 1.8rem;
    }
    .category-level1 li {
      @include fj;
      padding: 0 0.5rem;
      .icon {
        @include wh(0.8rem, 0.8rem);
        vertical-align: middle;
        margin-right: 0.2rem;
      }
      .count {
        background-color: #ccc;
        @include sc(0.4rem, #fff);
        padding: 0 0.1rem;
        border: 0.025rem solid #ccc;
        border-radius: 0.8rem;
        vertical-align: middle;
        margin-right: 0.25rem;
      }
      .arrow {
        vertical-align: middle;
      }
    }
    .category-active {
      background-color: #fff;
    }
  }

  .category-right {
    flex: 1;
    background-color: #fff;
    padding-left: 0.5rem;
    height: 16rem;
    overflow-y: auto;

    .category-level2 {
      li {
        @include fj;
        height: 1.8rem;
        line-height: 1.8rem;
        padding-right: 0.5rem;
        border-bottom: 0.06rem solid $bc;
        span {
          color: #666;
        }
      }
      .category-active {
        span {
          color: $blue;
        }
      }
    }
  }

  .content-box-enter-active,
  .content-box-leave-active {
    transition: all 0.3s;
    transform: translateY(0);
  }
  .content-box-enter,
  .content-box-leave-active {
    opacity: 0;
    transform: translateY(-100%);
  }

  .shoplist-cover {
    position: fixed;
    @include wh(100%, 100%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .shoplist-cover-enter-active,
  .shoplist-cover-leave-active {
    transition: opacity 0.3s;
  }
  .shoplist-cover-enter,
  .shoplist-cover-leave-active {
    opacity: 0;
  }
}
.food .sort-list {
  width: 100%;
  li {
    height: 2.5rem;
    display: flex;
    align-items: center;
    svg {
      @include wh(0.7rem, 0.7rem);
      margin: 0 0.3rem 0 0.8rem;
    }
    div {
      line-height: 2.5rem;
      flex: auto;
      text-align: left;
      text-indent: 0.25rem;
      border-bottom: 0.06rem solid $bc;
      @include fj;
      align-items: center;
      .selected-icon {
        display: none;
      }
      span {
        color: #666;
      }
    }
    .selected {
      .selected-icon {
        display: flex;
      }
      span {
        color: $blue;
      }
    }
  }
}
.food .filter {
  background-color: #f1f1f1;
  .content-box {
    flex-direction: column;
    align-items: flex-start;
    min-height: 10.6rem;
    background-color: #f1f1f1;
  }
  .filter-item {
    width: 100%;
    h4 {
      @include sc(0.4rem, #333);
      line-height: 1.5rem;
      height: 1.5rem;
      text-align: left;
      padding-left: 0.5rem;
      background-color: #fff;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 0.5rem;
      background-color: #fff;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 0.025rem solid #eee;
        @include wh(4.7rem, 1.4rem);
        margin-right: 0.25rem;
        border-radius: 0.125rem;
        padding: 0 0.25rem;
        margin-bottom: 0.25rem;
        svg {
          @include wh(0.8rem, 0.8rem);
          margin-right: 0.125rem;
        }
        span {
          @include sc(0.4rem, #333);
        }
        .support-icon {
          @include wh(0.8rem, 0.8rem);
          padding: 0.1rem 0.2rem;
          font-size: 0.5rem;
          border: 0.025rem solid $bc;
          border-radius: 0.15rem;
          margin-right: 0.25rem;
          line-height: 0.8rem;
          text-align: center;
        }
        .selected-icon {
          display: none;
        }
      }
      .selected {
        border: 1px solid $blue;
        .selected-icon {
          display: block;
        }
      }
    }
  }
  .filter-button-box {
    display: flex;
    background-color: #f1f1f1;
    width: 100%;
    padding: 0.3rem 0.2rem;
    button {
      background-color: #fff;
      border: 0.025rem solid #fff;
      @include wh(50%, 1.8rem);
      font-size: 0.8rem;
      line-height: 1.8rem;
      border-radius: 0.2rem;
    }
    .confirm {
      background-color: #56d176;
      color: #fff;
      margin-left: 0.3rem;
    }
  }
}
</style>
